<template>
  <div class="store radius boxShadow">
    <div v-show="!buyM" >
      <div v-show="!buyOkay">
        <div class="title">🏡您光临卖橘子的橘纸柚水果店</div>
        <div class="buy radius boxShadow">🍊橘子 💰5￥/斤，折扣<span class="off radius boxShadow">-80%Off</span></div>
        <div>您要 <input type="text" placeholder="你好？买？几？" v-model.lazy="num"> 斤❓</div>
        <div v-show="str" style="color:red">您也太小了吧？</div>
        <div><button @click="buy">Buy</button></div>
      </div>
      <div v-show="buyOkay">
        <div class="title">结账单🎉</div>
        <div><br>🍊橘子 — 📦{{num}}斤 — 💰单价：5￥<br></div>
        <div><br>💰总价：{{obj.total}} | 😉省了：{{obj.save}} | 💸折后价：{{obj.off}}<br></div>
        <button @click="backShop">Back Shop</button>
      </div>
    </div>
    <div v-show="buyM">
      <div class="title" :class="!nopes ? 'fontRed':''"><span v-show="nopes">🥰</span>您好？买？<span v-show="!nopes">🥰🔪买吗？</span></div>
      <button @click="back" :class="!nopes ? 'fontRed':''">Okay buy</button>
      <button @click="nope" v-show="nopes">No!</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      buyM: false,
      buyOkay: false,
      nopes: true,
      num: '',
      obj:{
        total:0,
        off:0,
        save:0
      },
      str:false
    }
  },
  methods:{
    buy(){
      if(this.num < 0){
        this.str = true
      }else if(this.num && this.num != 0){
        const total = this.num*5
        const off = total/(100/80)
        const save = total - off
        console.log(total,off,save);
        this.obj = {
          total,
          off,
          save
        }
        this.buyOkay = true
        this.str = false
      }else{
        this.buyM = true
        this.str = false
      }
    },
    backShop(){
      this.num = ''
      this.buyOkay = false
    },
    back(){
      this.nopes = true
      this.buyM = false
    },
    nope(){
      this.nopes = false
    }
  }
}
</script>

<style>
  body {
    text-align: center;
    background: #DD5E89;
    background: linear-gradient(90deg, #DD5E89,#F7BB97);
  }
  .radius {
    border-radius: 20px;
  }
  .boxShadow {
    box-shadow: 0 0em 0.3em 0px rgb(0 0 0 / 37%);
  }
  .store {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    padding: 20px;
    margin: 0 auto;
    background: #fff;
  }
  .title {
    font-size: 2em;
    border-bottom: 2px solid #000;
  }
  .buy {
    display: inline-block;
    margin: 20px 0;
    padding: 20px;
    color: #fff;
    background: #2196f3;
  }
  .off {
    padding: 2px 1em;
    margin-left: 1em;
    background: green;
  }
  button {
    padding: 0.5em 1em;
    margin-top: 1em;
    margin-right: 1em;
    border-radius: 1em;
    border: 2px solid #2196f3;
    background: #FFF;
    color: #2196f3;
    transition: all .2s;
  }
  button:hover {
    padding: 0.5em 2em;
    border-radius: 2em;
    background: #2196f3;
    color: #FFF;
    cursor: pointer;
  }
  .fontRed {
    color: red
  }
</style>